<!--
 * @Author: shawnXiao
 * @Date: 2022-01-04 16:57:18
 * @LastEditTime: 2022-01-05 10:11:51
 * @FilePath: /vite2-vue3-typescript/src/components/LangSelect/index.vue
-->
<template>
  <a-dropdown trigger="hover" class="international">
    <div class="change-language">
      <a-tooltip content="国际化" :effect="effect">
        <a @click.prevent>
          语言切换
          <DownOutlined />
        </a>
      </a-tooltip>
    </div>
    <template #overlay>
      <a-menu @click="handleSetLanguage">
        <a-menu-item :disabled="language === 'zh'" key="zh"> 中文 </a-menu-item>
        <a-menu-item :disabled="language === 'en'" key="en"> English </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { defineProps, computed, VNodeChild } from 'vue'
import { useStore } from 'vuex'
import { DownOutlined } from '@ant-design/icons-vue'

interface MenuInfo {
  key: string
  keyPath: string[]
  item: VNodeChild
  domEvent: MouseEvent
}

defineProps({
  effect: {
    type: String,
    default: 'dark',
    validator: function (value: string) {
      // 这个值必须匹配下列字符串中的一个
      return ['dark', 'light'].includes(value)
    },
  },
})

const store = useStore()
const language = computed(() => store.getters.language)

// 切换语言的方法
const i18n = useI18n()
const handleSetLanguage = ({ key }: MenuInfo) => {
  i18n.locale.value = key
  store.dispatch('app/setLanguage', key)
  window.location.reload()
}
</script>

<style scoped lang="less">
.change-language {
  width: 100px;
}
</style>
